<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>等你回家</title>
    <link href="<%=path%>/web/index/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<%=path%>/web/index/js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="<%=path%>/web/index/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!--fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>
    <!--//fonts-->
    <!-- 列表-->
    <link href="<%=path%>/web/index/css/base.css" rel="stylesheet">
    <link href="<%=path%>/web/index/css/index.css?551112523" rel="stylesheet">
    <link href="<%=path%>/web/index/css/task.css" rel="stylesheet">
    <link rel="stylesheet" href="<%=path%>/web/userinfo/css/page.css">
    <%--<link href="<%=path%>/web/index/css/m.css" rel="stylesheet">--%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/web/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/web/ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->

    <!-- /列表-->
</head>
<body style="background: #f7f7f7">
    <style>
        .replyShow{
            display: none;
        }
        .multistage{
            display: none;
        }


    </style>


<div class="banner-in">
    <div class="container">
        <h6>等你回家 / <span>任务列表</span></h6>
    </div>
</div>
<div class="header">
    <div class="container">
        <div class="logo">
            <a href="index.html"><img src="<%=path %>/web/index/images/logo.png" alt=" " /></a>
        </div>
        <div class="top-nav">
            <span class="menu"> </span>
            <ul>
                <li><a href="<%=path %>/web/index" class="scroll">首页</a></li>
                <li><a href="<%=path %>/web/information/chooseType" class="scroll">你在哪儿</a></li>
                <li><a href="<%=path %>/web/information/informationList?lostTypeId=0" class="scroll">我想回家</a></li>
                <li><a href="<%=path %>/web/blogger/blog" class="scroll">日志论坛</a></li>
                <li class="active"><a href="<%=path %>/web/task/releaseTask" class="scroll">任务列表</a></li>
                <c:if test="${empty(sessionScope.userinfo)}" var="result">
                    <li><a href="<%=path %>/web/userinfo/register" class="scroll">注册</a>|<a href="<%=path %>/web/userinfo/login" class="scroll">登录</a></li>
                </c:if>
                <c:if test="${not result}">
                    <li><a href="<%=path%>/web/userinfo/applyVolunteer" class="scroll">加入我们</a></li>
                    <c:if test="${(sessionScope.userinfo.username eq '')||(sessionScope.userinfo.username eq NULL)}" var="result">
                        <span style="color:white">欢迎<a href="<%=path %>/web/userinfo/index" style="color: white" href="">${sessionScope.userinfo.phone}</a></span>
                    </c:if>
                    <c:if test="${not result}">
                        <span style="color:white">欢迎<a href="<%=path %>/web/userinfo/index" style="color: white" href="">${sessionScope.userinfo.username}</a></span>
                    </c:if>
                    <span style="color: white">|</span>

                    <span style="color:white"><a style="color: white" href="<%=path %>/web/userinfo/logout">注销</a></span>
                    <span style="color: white">|</span>
                    <label><img style="width:30px;height: 30px" src="<%=path %>/web/uploadImages/${sessionScope.userinfo.pic}"></label>
                </c:if>
            </ul>
            <!--script-->
        </div>
        <div class="clearfix"> </div>
    </div>
</div>

<!-- conter-->
<article>
    <h1 class="t_nav"><span></span><a href="#" class="n1">网站首页</a><a href="#" class="n2">慢生活</a></h1>

    <div class="infos">
        <div class="newsview">
            <h3 class="news_title">标题:${task.title}</h3>
            <div class="news_author"><span style="margin-left: -17px;" class="au01"><img src="<%=path%>/web/static/img/user.jpg" />&nbsp;&nbsp;<b>${task.userinfo.username}</b></span><span class="au03">共<b>${task.browse}</b>人查看</span><span class="au03"><b>发布时间:<fmt:formatDate value="${task.inputTime}" pattern="yyyy-MM-dd"/></b></span></div>
            <%--<div class="news_about"><strong>简介</strong>个人博客，用来做什么？我刚开始就把它当做一个我吐槽心情的地方，也就相当于一个网络记事本，写上一些关于自己生活工作中的小情小事，也会放上一些照片，音乐。每天工作回家后就能访问自己的网站，一边听着音乐，一边写写文章。</div>--%>
            <div class="news_infos">
                <br/>
                <c:if test="${ not empty task.pic}">
                    <div>
                        <img style="width:43%;height:30%; " src="<%=path %>/web/userinfo/img/taskImages/${task.pic}"/>
                    </div>
                </c:if>

                ${task.info}


            </div>
        </div>
        <div class="share"> </div>

        <div style="margin-left: 10px;" class="news_pl">



        </div>



    </div>

    </div>

</div>

<div style="margin-left: 55px;"  class="col-md-3">
    <div class="store-right">
        <h6 class="Task-btn">
            <c:if test="${requestScope.task.mark.id eq 1}" var="result">
                <input class="" type="button"  value="接受任务"/>
            </c:if>
            <c:if test="${not result}">
                <input class="Button" disabled type="button" value="接受任务"/>
            </c:if>
        </h6>

    </div>
    <div class="store-right">
        <h6>今日最热</h6>
        <ul class="store-men">
            <c:forEach begin="0" end="4" var="i">
                <li><a href="${pageContext.request.contextPath}/web/task/details?id=${requestScope.tasks[i].id}"><span> </span>${requestScope.tasks[i].title}</a></li>
            </c:forEach>
        </ul>
    </div>
</div>
</article>
<!-- /conter-->

<!-- footer-->
    <footer>
        <div class="footer" >
            <div class="container" >
                <p style="font-size: 15px;"><span style="font-size: 20px;">等你回家</span><span>邮箱:1111111@163.com</span>
                    电话:0532—85025005</p>
                <p class="footer-class" style="font-size:15px;margin-top: -10px">地址:山东省青岛市市南区中联创意广场B1栋三楼 <a
                        href="http://w3layouts.com/" target="_blank">万码学堂</a></p>
                <p class="footer-class" style="font-size:15px;margin-top: -30px;text-transform: none">Copyright © 2019
                    www.dengnihuijia.com All rights Reserved.</p>
            </div>
        </div>
    </footer>
<!-- footer-->


</body>
</html>
<script type="text/javascript">
    $(function(){
        init(1);

        /*
        发布评论
         */
        $(".news_pl").on("click",".comment-form input",function () {
            var userinfoId=${requestScope.task.userinfo.id};
            var taskId=${task.id};
            var remark=$("#remark").val();

            var url="<%=path%>/web/task/details";
            $.post(url,{userinfoId:userinfoId,taskId:taskId,remark:remark},function (mes) {
                init();
                alert("发布成功");
                $("#remark").val("");
            })
        })

        /**
         * 给页码加点击事件
         */
        $(".news_pl").on("click",".meneame a",function () {
            var pageNum = $(this).html();
            init(pageNum);
            return false;
        });

        /**
         *这个是给回复家的点击事件一点回复又出来一个评论框
         */

        $(".news_pl").on("click","ul .reply",function(){
            var id = $(this).data("id");
            $(this).parents().find("p .show"+id).css("display","initial");
            return false;
        });


        /**
         *
         * 这个是给点击下拉出现二级评论内容
         */
        $(".news_pl").on("click","ul .showreply",function(){
            var img = $(this).find("img").attr("src");
            if(img=="<%=path%>/web/static/img/bottom2.jpg")
            {
                var id = $(this).data("id");
                $(this).parents().find(".mul"+id).css("display","initial");
                $(this).find("img").attr("src","<%=path%>/web/static/img/top.jpg");
            }
            if(img=="<%=path%>/web/static/img/top.jpg")
            {
                var id = $(this).data("id");
                $(this).parents().find(".mul"+id).css("display","none");
                $(this).find("img").attr("src","<%=path%>/web/static/img/bottom2.jpg");
            }

                <%--$.ajax({--%>
                    <%--url:"${pageContext.request.contextPath}/web/task/taskMultistageComments",--%>
                    <%--data:{"commentId":id},--%>
                    <%--type:"post",--%>
                    <%--// dataType:"json",--%>
                    <%--success:function (mes) {--%>
                        <%--$(".mul"+id).empty();--%>
                        <%--for (var i=0;i<mes.length;i++)--%>
                        <%--{--%>
                            <%--$(".mul"+mes[0].parentId).append(" <div class=\"candidate-image\" style=\"width: 30px;top: 0;\">\n" +--%>
                                <%--"                                    <img style=\"max-width: 100%;height: auto;border-radius: 50%;display: block;width: 80px;max-height: 30px;max-width: 30px;\" alt=\"author\" src=\"<%=path%>/web/index/images/default.jpg\">\n" +--%>
                                <%--"                                </div>\n" +--%>
                                <%--"\n" +--%>
                                <%--"                                <div class=\"candidate-info\" style=\"margin-top: 0px;\">\n" +--%>
                                <%--"                                    <div class=\"candidate-title\">\n" +--%>
                                <%--"                                        <a style=\"margin-top: 0px;\">"+mes[i].userinfo.username+"</a>\n" +--%>
                                <%--"                                        <span><i class=\"fa fa-calendar-check-o\"></i><img src=\"<%=path%>/web/static/img/date.jpg\" style=\"margin-top: -3px;\">"+mes[i].inputTime+"</span>\n" +--%>
                                <%--"                                    </div>\n" +--%>
                                <%--"                                </div>\n" +--%>
                                <%--"                                <div class=\"candidate-text-inner\">\n" +--%>
                                <%--"                                    <p style=\"margin-top: 10px; margin-bottom: 10px;\">"+mes[i].remark+"</p>\n" +--%>
                                <%--"                                </div>")--%>
                        <%--}--%>
                    <%--}--%>

                <%--});--%>
            return false;
        });

        /*
        发布二级评论
       */
        $(".news_pl").on("click","p .taskComments",function () {
            var userinfoId=${requestScope.task.userinfo.id};
            var taskId=${task.id};
            var remark= $(this).parents().find("textarea").val();
            var id= $(this).parents().find("a").data("id");
            var url="<%=path%>/web/task/taskMultistageComments";
            $.get(url,{userinfoId:userinfoId,taskId:taskId,remark:remark,id:id},function (mes) {
                init();
                alert("发布成功");
                $(this).parents().find("textarea").val()=="";
            }.bind(this))
        })

        /**
         *查看二级评论
         */


        //接受任务
        $(".Task-btn input").click(function(){
            var taskId = ${requestScope.task.id};
            var cl = $(this).attr("class");
            if(cl==""){

                $.get("<%=path %>/web/task/acceptTask",{taskId:taskId},function (mes) {
                    if(mes=="login"){
                        window.location.href="<%=path %>/web/userinfo/login";
                    }
                    if(mes=="ok"){
                        $(this).attr("class","Botton");
                        $(this).css("background","#e0e0e0");
                        $(this).css("border-width","0px");
                        $(this).prop("disabled","true")
                    }
                }.bind(this))
            }

        })



    });

    /**
     * 初始化评论
     * @param pageNum
     */
    function init(pageNum){
        var idStr = ${requestScope.task.id}
        $.get("<%=path %>/web/task/taskComments",{pageNum:pageNum,idStr:idStr},function (data) {
            $(".news_pl").empty();
            $(".news_pl").html(data)
        })
        return false;
    }





</script>
